{% extends "base.html" %}
{% load static %}

{% block css_head %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/user.css' %}">
{% endblock %}
{% block body %}
    {% block title_body %}
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header"> 
            <a class="navbar-brand" href="/"></span>首页</a>
        </div>
	{% if user.is_authenticated %} 
    <h5 class="navbar-text navbar-right font-solid">{{ u.username }}</h5>
	<a href="/user/{{ user.id }}" id="user_info" class="navbar-text navbar-right font-solid">
    <img class="img-circle little-header "  src="/media/{{ u.user_img.url }}"></img>
    个人中心</a>
    <a href="/user/logout" class="navbar-text navbar-right font-solid" >退出登录</a>
	{% else %}
        <form method="POST" id="login-form"  action="/user/login"  class="navbar-form navbar-right">
        {% csrf_token %}

            <div class="form-group">
                <div class="input-group ">
                    <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-envelope glyphicon-lg"></span></span>
                    
			<input type="text" name="username" id="name" class="form-control" placeholder="Name" aria-describedby="sizing-addon1">

                </div>
                <div class="input-group ">
                    <span class="input-group-addon" id="sizing-addon1"></span>
                    
		    <input type="password" name="password" class="form-control" id="passwd" placeholder="Password" aria-describedby="sizing-addon1">
		   
                </div>
                <button class="btn btn-default"   value="commit" name="commit">Login in</button>
            </div>
            {% csrf_token %}
        </form>
		 
	{% endif  %}

	<p id="results"></p>
    </nav>
    {% endblock %}

    {% block middle_body %}
    {% if u %}
    <div class="middle_body">

        <div class="carousel slide" id="advertise-generic" data-ride="carousel">
        <!-- ol index-->
            <ol class="carousel-indicators">
            <li data-target="#advertise-generic" data-slide-to="0"></li>
            <li data-target="#advertise-generic" data-slide-to="1"></li>
            </ol>
        <!-- wrapper for slides -->
            <div class="carousel-inner" style="margin-bottom: 40px;width:100%;" role="listbox">
                <div class="item active">
                    <img src="/{% static 'images/head.' %}png" class="item-img" style="height: 200px;">
                    <div class="carousel-caption">
                        <h1>some</h1>
                        <p>content ....</p>
                    </div>
                </div>
                
                <div class="item">
                    <img src="/{% static 'images/head.' %}png" class="item-img" style="height: 200px;">
                    <div class="carousel-caption">
                        <h1>some</h1>
                        <p>content ....</p>
                    </div>
                </div>
            </div>

            <!-- controls -->
            <a  class="left carousel-control" href="#advertise-generic" role="button" data-slide="prev" >
                <span class="glyphicon-chevron-left glyphicon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
        
            <a href="#advertise-generic" role="button" data-slide="next" class="right carousel-control">
                <span class="glyphicon-chevron-right glyphicon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>




        <div class="col-md-4 ">
            <a href="/question/box/Decode">
                <div class="thumbnail category">
                    <h1 class="font-slim" >Decode </h1>
                    <p class="font-big font-slim">some explainations...</p>
                </div>
            </a>
        </div>
        <div class="col-md-4 ">
            <a href="/question/box/Network">
                <div class="thumbnail category">
                    <h1 class="font-slim" >Network</h1>
                    <p class="font-big font-slim">some explainations...</p>
                </div>
            </a>
        </div>
        <div class="col-md-4 ">
            <a href="/question/box/Reverse">
                <div class="thumbnail category">
                    <h1 class="font-slim" >Reverse </h1>
                    <p class="font-big font-slim">some explainations...</p>
                </div>
            </a>
        </div>    
    </div>
    {% else %}

    {% endif  %}
    {% endblock %}
{% endblock %}
